﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Areas/Admin/Views/_Layout.cshtml";
    string Name =ViewContext.HttpContext.Request.Query["name"].ToString();
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/xadmin/js/xadmin.js"></script>
    <script src="~/plugin/echarts/echarts.min.js"></script>
    <link href="/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="/lib/layui/layui.js"></script>
</head>
<body>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">请求统计</li>
            <li>ip统计</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width:600px;height:400px;"></div>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>


    <script>
        $("#main").css('width', $(window).width() * 0.95)
        $("#main").css('height', $(window).height() * 0.95)
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '访问数据',
                left: 10
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: false
                    },
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                bottom: 90
            },
            dataZoom: [{
                type: 'inside'
            }, {
                type: 'slider'
            }],
            xAxis: {
                data:[],
                silent: false,
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                splitArea: {
                    show: false
                }
            },
            series: [{
                type: 'bar',
                data:[],
                // Set `large` for large data amount
                large: true
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        $.get("/admin/iislog/GetIISCount", { name: '@Name' }, function (data) {
            myChart.setOption({
                xAxis: {
                    data: data.xdata
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '请求统计',
                    data: data.ydata
                }]
            });
        });
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            @*<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>*@
            <button class="layui-btn layui-btn-sm" onclick="javascript:location.replace(location.href);">刷新</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        var Name = getParam('name');
        var ipData = null;
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#test'
                , height: 'full-20'
                , url: '/admin/iislog/GetLogIps?name=' + Name
                , toolbar: '#toolbarDemo'
                , title: 'ip访问统计'
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'ip', title: 'IP'}
                    , { field: 'count', title: '访问次数', sort: true }
                    , {
                        field: 'isWarning', title: '危险性', width: 350, sort: true, templet: function (res) {
                            return res.isWarning == true ? '<span style="color:red">危险IP</span>' : "";
                        }
                    }
                    //, { field: 'sPort', title: '端口' }
                    //, { field: 'scStatus', title: '状态' }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]
                , limits: [10, 15, 40, 60, 80, 100, 200, 400]
                , limit: 100 //默认采用10
                , page: true
                , request: {
                    pageName: 'pageNumber' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
            });
            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                };
            });
            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.prompt({
                        formType: 2
                        , value: data.email
                    }, function (value, index) {
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                 }
            });
        });
        var systemKeyWords = ['app', 'admincenter', 'plugin']
        function Find(key) {
            var isFind = false;
            systemKeyWords.forEach(function (item) {
                if (key.indexOf(item) != -1) {
                    isFind = true;
                }
            })
            return isFind ? '<span style="color:red">' + key + '</span>' : key
        }
        function getParam(paramName) {
            paramValue = "", isFound = !1;
            if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
                arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
                while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
            }
            return paramValue == "" && (paramValue = null), paramValue
        }
    </script>
</body>
</html>